<template>
  <div style="height:100%;width:100%;position:relative;" ref="maindev">
      <div class="pagetop" ref="buttondiv" :style="{ height: OtherShow?'135px':'70px' }">
          <table style="width:100%;font-size:12px;border-spacing: 5px;min-width: 1350px;" border="0">
              <tr>
                  <td align="right" style="width:50px">报告单元</td>
                  <td style="width:150px">
                      <rm-ddl-rptunit prgno="LIS643" defaultflag="1" v-model="rptunitid" width="100%" @change="rptunitChange"></rm-ddl-rptunit>
                  </td>
                  <td align="right" style="width:50px">样本日期</td>
                  <td style="width:150px">
                      <el-date-picker v-model="datetime1" type="date" placeholder="开始日期" value-format="yyyy-MM-dd 00:00:00" size="mini" :clearable="false" style="width:100%"></el-date-picker>
                  </td>
                  <td align="center" style="width:50px">至</td>
                  <td style="width:150px">
                      <el-date-picker v-model="datetime2" type="date" placeholder="结束日期" value-format="yyyy-MM-dd 23:59:59" size="mini" :clearable="false" style="width:100%"></el-date-picker>
                  </td>
                  <td align="right" style="width:50px">科室</td>
                  <td style="width:150px">
                      <el-select v-model="reqdeptno" @dblclick.native="popMultipleChk(reqdeptno, 'reqdeptno', deptOption, '科室选择')" filterable clearable style="width:100%">
                          <el-option v-for="(item, index) in deptOption" :key="index" :value="item.data" :label="item.display">
                          </el-option>
                      </el-select>
                  </td>
                  <td colspan="7">
                      <el-checkbox v-model="deptnoflag" true-label="1" false-label="0" @change="clearData()">科室</el-checkbox>
                      <el-checkbox v-model="pattypeflag" true-label="1" false-label="0" @change="clearData()">病人类型</el-checkbox>
                      <el-checkbox v-model="hospitalflag" true-label="1" false-label="0" @change="clearData()">送检医院</el-checkbox>
                      <el-checkbox v-model="sexflag" true-label="1" false-label="0" @change="clearData()">性别</el-checkbox>
                      <el-checkbox v-model="diagflag" true-label="1" false-label="0" @change="clearData()">诊断</el-checkbox>
                      <el-checkbox v-model="diagicdflag" true-label="1" false-label="0" @change="clearData()">诊断ICD</el-checkbox>
                      <el-checkbox v-model="testmethodflag" true-label="1" false-label="0" @change="clearData()">测试方法</el-checkbox>
                  </td>
              </tr>
              <tr v-show="OtherShow">
                  <td align="right" style="width:50px">报告项目</td>
                  <td style="width:150px">
                      <el-input v-model="txtrptitemname" @dblclick.native="dialogTableVisible1=true" readonly clearable placeholder="双击选择报告项目" style="width:100%"></el-input>
                  </td>
                  <td align="right" style="width:50px">性别</td>
                  <td style="width:150px">
                      <el-select v-model="txtpatsex" filterable clearable style="width:100%">
                          <el-option value="1" label="男"></el-option>
                          <el-option value="2" label="女"></el-option>
                          <el-option value="3" label="未知"></el-option>
                      </el-select>
                  </td>
                  <td align="right" style="width:50px">病人类型</td>
                  <td style="width:150px">
                      <rm-ddl-common datatype="seccode" kindno="PT" dataname="病人类型" v-model="pattype" width="100%" @change="PTChange"></rm-ddl-common>
                  </td>
                  <td align="right" style="width:50px">送检医院</td>
                  <td style="width:150px">
                      <rm-ddl-common @change="hospitalchange" datatype="hospital" dataname="医院" v-model="hospital" width="100%"></rm-ddl-common>
                  </td>
              </tr>
              <tr v-show="OtherShow">
                  <td align="right" style="width:50px">年龄区间</td>
                  <td style="width:150px">
                      <el-input size="small" style="width:42%;" v-model="minpatage" oninput="value=value.replace(/[^\-?\d.]/g,'')"></el-input>&nbsp;至&nbsp;
                      <el-input size="small" style="width:42%;" v-model="maxpatage" oninput="value=value.replace(/[^\-?\d.]/g,'')"></el-input>
                  </td>
                  <td align="right" style="width:50px">诊断</td>
                  <td style="width:150px">
                      <el-input v-model="txtdiag" width="100%" placeholder="诊断"></el-input>
                  </td>
                  <td align="right" style="width:50px">诊断IDC</td>
                  <td style="width:150px">
                      <el-input v-model="txtdiagicd" width="100%" placeholder="诊断IDC"></el-input>
                  </td>
                  <td colspan="2" style="width:150px">
                      <el-checkbox v-model="agenullflag" true-label="1" false-label="0" style="margin-left:5px">包含年龄为空的</el-checkbox>
                  </td>
              </tr>
              <tr>
                  <td colspan="13" align="right">
                      <el-link style="padding-right:6px;font-weight:700;color:grey21" :underline="false" @click="BtnOtherShow">{{ OtherShow?"收起▲":"展开▼" }}</el-link>
                      <el-button @click.native="QueryData()" v-has="'PINQUERY'" type="primary" icon="el-icon-search">查询</el-button>
                      <el-button @click.native="BtnSort" icon="el-icon-sort">排序</el-button>
                      <el-button @click.native="BtnClear" icon="el-icon-close">清除</el-button>
                      <el-button @click.native="BtnExport" icon="el-icon-download">导出</el-button>
                      <el-button @click.native="BtnPrint(1)" icon="el-icon-printer">打印</el-button>
                      <el-button @click.native="BtnPrint(2)" class="el-icon-printer">打印样式设计</el-button>
                  </td>
              </tr>
          </table>
      </div>
      <div class="pagecenter" ref="centerdev" :style="{ top: OtherShow?'140px':'75px' }">
          <vxe-table show-overflow ref="xTable1" :height="tableheight" :loading="loading" :data.sync="tableData" class="editable-footer" :footer-method="footerMethod" :footer-cell-class-name="footerCellClassName" border size="mini" show-header-overflow highlight-current-row highlight-hover-row show-footer resizable stripe @cell-dblclick="celldblclick">
              <vxe-table-column field="testmethod" title="测试方法" width="80" header-align="center" v-if="testmethodflag == '1'" align="center"></vxe-table-column>
              <vxe-table-column field="pat_typecodename" title="病人类型" width="80" header-align="center" align="center" v-if="pattypeflag == '1'"></vxe-table-column>
              <vxe-table-column field="hospcodename" title="送检医院" width="200" header-align="center" align="left" v-if="hospitalflag == '1'"></vxe-table-column>
              <vxe-table-column field="req_deptnoname" title="科室" width="100" header-align="center" align="center" v-if="deptnoflag == '1'"></vxe-table-column>
              <vxe-table-column field="pat_sexname" title="性别" width="40" header-align="center" align="center" v-if="sexflag == '1'">
              </vxe-table-column>
              <vxe-table-column field="pat_diag" title="诊断" width="140" header-align="center" align="left" v-if="diagflag == '1'"></vxe-table-column>
              <vxe-table-column field="pat_diag_icd" title="诊断ICD" width="100" header-align="center" v-if="diagicdflag == '1'" align="center"></vxe-table-column>
              <vxe-table-column field="cp_itemcode_en" title="项目代号" width="100" header-align="center" align="left"></vxe-table-column>
              <vxe-table-column field="cp_rpt_itemname" title="项目名称" width="150" header-align="center" align="left"></vxe-table-column>
              <vxe-table-column field="itemcount" title="项次" width="40" header-align="center" align="center">
                  <template v-slot="{row}">
                      <u style="color:blue">{{row.itemcount}}</u>
                  </template>
              </vxe-table-column>
              <vxe-table-column field="cp_n" title="正常/阴性" width="80" header-align="center" align="center">
                  <template v-slot="{ row }">
                      {{row.cp_n+'('+row.cp_nrate+')'}}
                  </template>
              </vxe-table-column>
              <vxe-table-column field="cp_h" title="偏高/阳性" width="80" header-align="center" align="center">
                  <template v-slot="{ row }">
                      {{row.cp_h+'('+row.cp_hrate+')'}}
                  </template>
              </vxe-table-column>
              <vxe-table-column field="cp_l" title="偏低/弱阳性" width="80" header-align="center" align="center">
                  <template v-slot="{ row }">
                      {{row.cp_l+'('+row.cp_lrate+')'}}
                  </template>
              </vxe-table-column>
          </vxe-table>
      </div>
      <!--报告项目--->
      <el-dialog width="1000px" top="10px" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="报告项目" :visible.sync="dialogTableVisible1" :destroy-on-close="true">
          <rm-chkboxSelect2 prgno="LIS643" @cancel="dialogTableVisible1 = false" :isAllRpt="1" :rptunitid="rptunitid" :rptunitdisabled="true" @selitem="addrptitem" @selitems="SelectRptItems" ref="rptdialog"></rm-chkboxSelect2>
      </el-dialog>
      <!--多选弹窗--->
      <el-dialog width="900px" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" :title="multichktitle" :visible.sync="dialogMultipleVisible" :destroy-on-close="true" v-if="dialogMultipleVisible">
          <rm-SqlMultiple :leftOption="option1" :rightOption="option2" :name="fieldname" @change="closedialog" ref="multidialog"></rm-SqlMultiple>
      </el-dialog>

      <!--明细信息--->
      <el-dialog width="80%" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="项目结果查询明细" :visible.sync="detailshow" :destroy-on-close="true">
          <div style="height:600px">
              <rm-layout-top splitcolor="white" :splitwidth=5 :fixsize=30 :canDrag="false">
                  <template v-slot:fix>
                      <div style="height:30px;border:1px solid #CCC;padding:3px">
                          <el-button @click.native="queryDetail" type="primary" icon="el-icon-search">查询</el-button>
                          <el-button @click.native="DetailExport" icon="el-icon-download">导出</el-button>
                      </div>
                  </template>
                  <div style="height:100%;width:100%;background-color:#ddccbb;">
                      <vxe-table show-overflow ref="detxTable" height="auto" :loading="detailloading" :data.sync="detailData" class="editable-footer" border size="mini" show-header-overflow highlight-current-row highlight-hover-row show-footer resizable stripe>
                          <vxe-table-column type="index" title="NO." width="40" header-align="center" align="center"></vxe-table-column>
                          <vxe-table-column field="test_dt" title="检测日期" width="120" header-align="center" align="center"></vxe-table-column>
                          <vxe-table-column field="sampleno" title="样本号" width="120" header-align="center" align="center"></vxe-table-column>
                          <vxe-table-column field="labgroupname" title="检验组" width="80" header-align="center" align="left"></vxe-table-column>
                          <vxe-table-column field="rptunitname" title="报告单元" width="100" header-align="center" align="left"></vxe-table-column>
                          <vxe-table-column field="barcode" title="条码号" width="100" header-align="center" align="left"></vxe-table-column>
                          <vxe-table-column field="hospcode" title="医院代码" width="100" header-align="center" align="left"></vxe-table-column>
                          <vxe-table-column field="hospitalname" title="医院名称" width="150" header-align="center" align="left"></vxe-table-column>
                          <vxe-table-column field="pat_name" title="姓名" width="70" header-align="center" align="center"></vxe-table-column>
                          <vxe-table-column field="pat_sexname" title="性别" width="50" header-align="center" align="center"></vxe-table-column>
                          <vxe-table-column field="pat_agestr" title="年龄" width="60" header-align="center" align="center"></vxe-table-column>
                          <vxe-table-column field="req_bedno" title="床号" width="70" header-align="center" align="center"></vxe-table-column>
                          <vxe-table-column field="specimen_name" title="标本类型" width="90" header-align="center" align="center"></vxe-table-column>
                          <vxe-table-column field="rpt_itemcode" title="项目代号" width="100" header-align="center" align="left"></vxe-table-column>
                          <vxe-table-column field="itemcode_en" title="项目代号" width="100" header-align="center" align="left"></vxe-table-column>
                          <vxe-table-column field="rpt_itemname" title="项目名称" width="150" header-align="center" align="left"></vxe-table-column>
                          <vxe-table-column field="result_str" title="检验结果" width="90" header-align="center" align="center"></vxe-table-column>
                          <vxe-table-column field="result_flagname" title="结果状态" width="70" header-align="center" align="center"></vxe-table-column>
                          <vxe-table-column field="rechk_username" title="审核人" width="70" header-align="center" align="center"></vxe-table-column>
                      </vxe-table>
                  </div>
              </rm-layout-top>
          </div>

      </el-dialog>
  </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
export default {
  name: "LIS643",
  data() {
      return {
          buttonwidth: "",
          //筛选项目
          datetime1: "",
          datetime2: "",
          //统计项目
          deptnoflag: "0",
          hospitalflag: "0",
          sexflag: "0",
          pattypeflag: "0",
          diagflag: "0",
          diagicdflag: "0",
          testmethodflag: "0",
          agenullflag: "0",
          minpatage: 0,
          maxpatage: 200,
          OtherShow: false,
          dialogTableVisible1: false,
          //查询条件
          wardno: "", //病区
          reqdeptno: "", //科室
          labgroupid: "", //检验组别
          rptunitid: "", //报告单元
          txtpatsex: "",
          hospital: "",
          pattype: "",
          txtrptitemname: "",
          txtrptitemcode: "",
          txtdiag: "",
          txtdiagicd: "",
          //表格属性
          tableheight: "auto",
          loading: false,
          txtpattype: "",
          //表格内容
          totalData: [],
          tableData: [],
          tableColumn: [],
          currentindex: -1,
          //多选弹窗
          rptunitOption: [],
          deptOption: [],
          labgroupOption: [],
          wardOption: [],
          multichktitle: "",
          dialogMultipleVisible: false,
          option1: [],
          option2: [],
          fieldname: "",
          //以下为排序数组
          sortArr: [],
          SortTableColumn: [],
          rptStyleSettingState: false,
          detailshow: false,
          detailloading: false,
          detailData: [],
          selrow: {},
      };
  },
  created() {
      this.QueryOption();
  },
  updated() {},
  methods: {
      QueryData() {
          this.loading = true;
          this.$tool
              .request({
                  url: "LIS/LIS6/LIS643",
                  method: "post",
                  data: {
                      action: "queryData",
                      startdate: this.datetime1,
                      enddate: this.datetime2,
                      rptunitid: this.rptunitid,
                      reqdeptno: this.reqdeptno,
                      txtrptitemcode: this.txtrptitemcode,
                      minpatage: this.minpatage,
                      maxpatage: this.maxpatage,
                      pattype: this.pattype,
                      txtdiag: this.txtdiag,
                      txtdiagicd: this.txtdiagicd,
                      hospital: this.hospital,
                      agenullflag: this.agenullflag,
                      deptnoflag: this.deptnoflag,
                      hospitalflag: this.hospitalflag,
                      pattypeflag: this.pattypeflag,
                      sexflag: this.sexflag,
                      diagflag: this.diagflag,
                      diagicdflag: this.diagicdflag,
                      testmethodflag: this.testmethodflag,
                      sortArr: this.sortArr, //排序
                  },
              })
              .then((res) => {
                  this.loading = false;
                  this.tableData = res.Data;
                  this.SortTableColumn = res.Cols;
              });
      },
      QueryOption() {
          this.$tool
              .request({
                  url: "LIS/LIS6/LIS643",
                  method: "post",
                  data: {
                      action: "initOption",
                  },
              })
              .then((res) => {
                  this.deptOption = res.deptOption;
                  this.datetime1 = res.datetime + " 00:00:00";
                  this.datetime2 = res.datetime + " 23:59:59";
              });
      },
      footerMethod({ columns, data }) {
          return [
              columns.map((column, columnIndex) => {
                  var a = columns.indexOf(columns.find((x) => x.property == "itemcount"));
                  if (columnIndex === 0) {
                      return "总计";
                  } else if (columnIndex >= a) {
                      if (this.tableData.length > 0) return this.SumAll(this.tableData, column.property);
                      else return null;
                  }
                  return null;
              }),
          ];
      },
      celldblclick({ row, column }) {
          if (column.property == "itemcount") {
              this.selrow = row;
              this.queryDetail();
          }
      },
      queryDetail() {
          this.detailshow = true;
          this.detailloading = true;
          this.$tool
              .request({
                  url: "LIS/LIS6/LIS643",
                  method: "post",
                  data: {
                      action: "queryDetail",
                      startdate: this.datetime1,
                      enddate: this.datetime2,
                      rptunitid: this.rptunitid,
                      reqdeptno: this.reqdeptno,
                      txtrptitemcode: this.selrow.rpt_itemcode,
                      minpatage: this.minpatage,
                      maxpatage: this.maxpatage,
                      pattype: this.pattype,
                      txtdiag: this.txtdiag,
                      txtdiagicd: this.txtdiagicd,
                      hospital: this.hospital,
                      agenullflag: this.agenullflag,
                      deptnoflag: this.deptnoflag,
                      hospitalflag: this.hospitalflag,
                      pattypeflag: this.pattypeflag,
                      sexflag: this.sexflag,
                      diagflag: this.diagflag,
                      diagicdflag: this.diagicdflag,
                      testmethodflag: this.testmethodflag,
                      gpreq_deptno: this.selrow.req_deptno,
                      gphospcode: this.selrow.hospcode,
                      gppat_typecode: this.selrow.pat_typecode,
                      gppat_sex: this.selrow.pat_sex,
                      gppat_diag: this.selrow.pat_diag,
                      gppat_diag_icd: this.selrow.pat_diag_icd,
                      gptestmethod: this.selrow.testmethod,
                  },
              })
              .then((res) => {
                  this.detailloading = false;
                  this.detailData = res.data;
              })
              .catch((e) => {
                  this.$alert(e, "提示");
              });
      },
      DetailExport() {
          let tableColumn = this.$refs.detxTable.getColumns();
          let extableColumn = [];
          tableColumn.forEach((item) => {
              extableColumn.push({ title: item.title, field: item.property });
          });
          this.$pub.exportTableExcel(this.detailData, extableColumn, "LIS643 项目阳性率统计(明细).xlsx");
      },
      footerCellClassName({ $rowIndex, column, columnIndex }) {},
      //展开 隐藏
      BtnOtherShow() {
          this.OtherShow = !this.OtherShow;
      },
      rptunitChange(code, name) {
          this.rptunitid = code;
      },
      hospitalchange(code, name) {
          this.hospital = code;
      },
      PTChange(code, name) {
          this.pattype = code;
      },
      SumAll(data, property) {
          var plus = 0;
          if (data) {
              for (let i = 0, len = data.length; i < len; i++) {
                  plus += data[i][property] - 0;
              }
          }

          return plus;
      },
      popMultipleChk(e, fieldname, option, title) {
          let temp = XEUtils.clone(option, true);
          this.option1 = [];
          this.option2 = [];
          if (e != "") {
              let k = e.split(",");
              k.forEach((item) => {
                  let ndata = temp.find((m) => m.data == item);
                  if (ndata != undefined && ndata != null) {
                      this.option2.push(ndata);
                  }
              });
              temp.forEach((item) => {
                  if (k.indexOf(item.data + "") < 0) {
                      this.option1.push(item);
                  }
              });
          } else {
              this.option1 = temp;
          }
          this.fieldname = fieldname;
          this.multichktitle = title;
          this.dialogMultipleVisible = true;
      },
      closedialog(value, name) {
          if (value != "close") {
              this[name] = value;
          }
          this.dialogMultipleVisible = false;
      },
      BtnExport() {
          this.$refs.xTable1.exportCsv({ filename: "LIS643项目阳性率统计" });
      },
      clearData() {
          this.tableData = [];
          //会导致表头渲染错位
          // this.tableColumns = [];
      },
      SelectRptItems(rows) {
          var revalname = "";
          var reval = "";
          if (rows.length > 0) {
              reval = rows[0].rpt_itemcode;
              revalname = rows[0].rpt_itemname;
              for (let i = 1; i < rows.length; i++) {
                  reval += "," + rows[i].rpt_itemcode;
                  revalname += "," + rows[i].rpt_itemname;
              }
          }

          this.txtrptitemname = revalname;
          this.txtrptitemcode = reval;
          this.dialogTableVisible1 = false;
      },
      addrptitem(code, name, row) {
          this.txtrptitemcode = code;
          this.txtrptitemname = name;
          this.dialogTableVisible1 = false;
      },
      BtnSort() {
          this.$rmsort(
              { tableColumn: this.SortTableColumn, sortArr: this.sortArr },
              {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
              }
          )
              .then((res) => {
                  this.sortArr = res.data;
                  this.QueryData();
              })
              .catch(() => {});
      },
      //清除
      BtnClear() {
          this.datetime1 = "";
          this.datetime2 = "";
          this.rptunitid = "";
          this.reqdeptno = "";
          this.txtrptitemcode = "";
          this.txtrptitemname = "";
          this.minpatage = 0;
          this.maxpatage = 0;
          this.pattype = "";
          this.txtdiag = "";
          this.txtdiagicd = "";
          this.hospital = "";
          this.agenullflag = "0";
          this.deptnoflag = "0";
          this.hospitalflag = "0";
          this.pattypeflag = "0";
          this.sexflag = "0";
          this.diagflag = "0";
          this.diagicdflag = "0";
          this.testmethodflag = "0";
          this.sortArr = [];
          this.tableData = [];
      },
      //导出
      BtnExport() {
          let options = {
              filename: "LIS643 项目阳性率统计.csv",
          };
          this.$refs.xTable1.exportCsv(options);
      },
      //获取登录类型
      GetLoginuType() {
          let loginutype = this.$tool.getSession(this.$tool.loginutype);
          if (loginutype == "G") {
              this.rptStyleSettingState = true;
          }
      },
      //打印
      BtnPrint(index) {
          var data = this.$refs.xTable1.afterFullData;
          if (data.length > 0) {
              const rload = this.$pub.openLoading(this, "正在打开报表设计器，请稍候……");
              let column = this.$refs.xTable1.getTableColumn().tableColumn;
              let str = JSON.stringify(this.$pub.InitColumn(column));
              str += "\r";
              str += JSON.stringify(data);
              let sql = btoa(encodeURIComponent(str));
              if (index == "1") {
                  jsObj.PrintCustomJsonReport("5070", sql, this.userno, "项目阳性率统计样式", "");
              } else {
                  jsObj.SetCustomJsonPrintConfig("5070", sql, this.userno, "项目阳性率统计样式");
              }
              rload.close();
          } else {
              this.$alert("请选中要打印的数据！");
          }
      },
  },
};
</script>

<style scoped>
.pagetop {
  width: 100%;
  height: 100px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
  overflow-x: auto;
}
::-webkit-scrollbar {
  width: 0px;
  height: 5px;
  border: 4px solid white;
}
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
}
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::v-deep .pagetop .el-checkbox {
  margin-right: 10px !important;
}
.pagecenter {
  position: absolute;
  top: 105px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}
table tr td:nth-child(1) {
  width: 80px;
}
.left_nav {
  width: 20%;
  height: 100%;
  border-right: 1px solid #ccc;
  padding: 0px 0px 0px 0px;
  float: left;
  display: inline;
}
.left_nav div {
  cursor: pointer;
  height: 40px;
  width: 100%;
  float: left;
  padding-left: 20px;
  line-height: 40px;
}
.left_nav .active {
  background-color: DeepSkyBlue;
}
.right_nav {
  width: 80%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  float: left;
  display: inline;
}
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 10px;
}
</style>
